<template>
  <view class="container">
    <!-- 搜索框区域 -->
    <view class="search-container">
      <view class="search-bar">
        <image class="search-icon" src="/static/search (4).png"></image>
        <text class="search-placeholder">SpringBoot·C/C++·算法</text>
      </view>
      <view class="search-actions">
        <image class="coin-icon" src="/static/购物车.png"></image>
      </view>
    </view>
    
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <text>加载中...</text>
    </view>
    
    <!-- 错误状态 -->
    <view v-else-if="error" class="error-container">
      <text>加载失败，请重试</text>
      <button @click="fetchCategories" class="retry-btn">重新加载</button>
    </view>
    
    <!-- 双楼层布局 -->
    <view v-else class="layout">
      <!-- 左侧分类 -->
      <view class="left-category">
        <view 
          v-for="(item, index) in leftCategoryData" 
          :key="item.id"
          class="category-item"
          :class="{ active: item.isActive }"
          @click="handleCategoryClick(index)"
        >
          <text class="category-text">{{ item.catname }}</text>
        </view>
      </view>

      <!-- 右侧内容 -->
      <view class="right-content">
        <!-- 顶部 banner（添加点击事件） -->
        <image 
          src="/static/12.png" 
          class="top-banner" 
          mode="widthFix" 
          @click="gotoCourseList"
        ></image>
        <view class="content-item" v-for="(subItem, index) in currentRightContent" :key="index">
          <image :src="subItem.icon || '/static/default-icon.png'" class="content-icon" mode="widthFix"></image>
          <text class="content-text">{{ subItem.catname }}</text>
        </view>
        
        <!-- 空状态 -->
        <view v-if="!currentRightContent || currentRightContent.length === 0" class="empty-content">
          <text>暂无子分类</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { topBanner } from './categoryData.js';

// 响应式数据
const loading = ref(true);
const error = ref(false);
const allCategories = ref([]);
const leftCategoryData = ref([]);
const currentRightContent = ref([]);
const currentBannerIndex = ref(0);
const currentBanner = ref(topBanner[0]);

// 获取分类数据
function fetchCategories() {
  loading.value = true;
  error.value = false;
  
  uni.request({
    url: 'http://47.113.230.113:8088/category/list',
    method: 'GET',
    success: (res) => {
      if (res.statusCode === 200) {
        const data = res.data;
        allCategories.value = data;
        
        // 处理左侧分类数据 (pid为0的是顶级分类)
        const topLevelCategories = data.filter(item => item.pid === 0);
        leftCategoryData.value = topLevelCategories.map((item, index) => ({
          ...item,
          isActive: index === 0 // 第一个默认激活
        }));
        
        // 设置初始右侧内容
        if (leftCategoryData.value.length > 0) {
          updateRightContent(leftCategoryData.value[0].id);
        }
        
        loading.value = false;
      } else {
        throw new Error(`请求失败，状态码: ${res.statusCode}`);
      }
    },
    fail: (err) => {
      console.error('获取分类数据失败:', err);
      error.value = true;
      loading.value = false;
    }
  });
}

// 更新右侧内容
function updateRightContent(categoryId) {
  // 获取当前分类的子分类 (pid等于当前分类id)
  currentRightContent.value = allCategories.value.filter(item => item.pid === categoryId);
}

// 处理分类点击
function handleCategoryClick(index) {
  leftCategoryData.value.forEach((item) => (item.isActive = false));
  leftCategoryData.value[index].isActive = true;
  updateRightContent(leftCategoryData.value[index].id);
}

// 跳转到课程列表页面
function gotoCourseList() {
  uni.navigateTo({
    url: '/pages/CourseList' // 课程列表页面的路径，根据实际项目路径修改
  });
}

// 轮播banner
function startBannerRotation() {
  setInterval(() => {
    currentBannerIndex.value = (currentBannerIndex.value + 1) % topBanner.length;
    currentBanner.value = topBanner[currentBannerIndex.value];
  }, 3000); // 每3秒切换一次
}

// 生命周期钩子
onMounted(() => {
  fetchCategories();
  startBannerRotation();
});
</script>

<style scoped>
/* 容器占满整个屏幕高度，作为flex容器 */
.container {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  height: 100vh;
  overflow: hidden;
}

/* 搜索框样式 */
.search-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15rpx 20rpx;
  width: 550rpx;
  background-color: #f0f1f3;
  border-radius: 30rpx;
  margin-bottom: 50rpx;
  margin-left: 30rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.search-icon {
  width: 30rpx;
  height: 30rpx;
  margin-left: 10rpx;
}

.search-placeholder {
  font-size: 24rpx;
  color: #999;
}

.search-actions {
  display: flex;
  gap: 20rpx;
  position: relative;
  left: 100rpx;
}

.coin-icon {
  width: 40rpx;
  height: 40rpx;
}

/* 加载和错误状态 */
.loading-container, .error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200rpx;
  flex-direction: column;
}

.retry-btn {
  margin-top: 20rpx;
  background-color: #ff0000;
  color: white;
  border: none;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
}

/* 顶部 banner */
.top-banner {
  width: 95%;
  display: block;
  margin: 0 auto;
  object-fit: cover;
  height: 100rpx;
  position: relative;
  bottom: 11rpx;
  border-radius: 10rpx;
  margin-bottom: 80rpx;
}

/* 双楼层布局 - 自动填充剩余空间 */
.layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 左侧分类 - 可滚动 */
.left-category {
  width: 220rpx;
  border-right: 1px solid #f2f2f2;
  background-color: #fafafa;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.category-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 120rpx;
  font-size: 26rpx;
  color: #333;
  position: relative;
  padding-left: 20rpx;
}

/* 激活样式 */
.category-item.active {
  color: #ff0000;
  background-color: #fff;
}

/* 左侧激活的红色短板圆角边框 */
.category-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  width: 6px;
  height: 26px;
  background-color: #ff0000;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.category-text {
  margin-left: 10px;
}

/* 右侧内容 */
.right-content {
  flex: 1;
  padding: 10rpx;
  height: 700rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-y: auto;
}

.content-item {
  width: 33.33%; /* 一行三个 */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  bottom: 50rpx;
  margin-bottom: 20rpx;
}

.content-icon {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 10rpx;
  border-radius: 50%;
  background-color: #f0f0f0; /* 默认背景色 */
}

.content-text {
  font-size: 12px;
  color: #666;
  text-align: center;
}

/* 空状态 */
.empty-content {
  width: 100%;
  text-align: center;
  padding: 40rpx;
  color: #999;
}
</style>